<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <div id="app">
        <h1>表单元素v-model</h1>
        <form @submit.prevent="submitForm">
            <p>
                <label for="name">姓名：</label>
                <!-- .lazy 修饰符可以延迟更新 -->
                <input type="text" id="name" v-model.lazy="username">
            <p>{{username}}</p>
            </p>
            <p>
                <label for="password">密码：</label>
                <!-- .trim 修饰符可以自动去除前后空格 -->
                <input type="password" id="password" v-model.trim="password">
            </p>
            <p>
                <label for="age">年龄：</label>
                <!-- .number 修饰符可以将输入值转换为数字 -->
                <input type="text" id="age" v-model.number="age">
            </p>
            <p>
                <label>性别：</label>
                <input type="radio" name="sex" value="male" v-model="gender">男
                <input type="radio" name="sex" value="female" v-model="gender"> 女
            </p>
            <p>
                <label>爱好：</label>
                <input type="checkbox" value="raeading" v-model="like">阅读
                <input type="checkbox" value="swimming" v-model="like"> 游泳
                <input type="checkbox" value="hiking" v-model="like"> 登山


                <!-- <input type="checkbox" true-value="reading" false-value="no reading" v-model="like"> 阅读
                <input type="checkbox" true-value="swimming" false-value="no swimming" v-model="like"> 游泳
                <input type="checkbox" true-value="hiking" false-value="no hiking" v-model="like"> 登山 -->

            </p>
            <p>
                <label for="abc">工作经验</label>
                <select id="abc" v-model="workExp">
                    <option value="">请选择</option>
                    <option value="0">无</option>
                    <option value="1">1-3年</option>
                    <option value="2">3-5年</option>
                    <option value="3">5-10年</option>
                    <option value="4">10年以上</option>
                </select>
            </p>
            <p>
                <label for="desc">个人描述：</label>
                <textarea id="desc" v-model="desc"></textarea>
            </p>
            <button type="submit">提交</button>
        </form>

    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { ref, reactive, watch, createApp, toRefs } = Vue;
        createApp({
            setup() {
                const obj = reactive({
                    username: '',
                    password: '',
                    age: 0,
                    gender: 'male',
                    like: [],
                    workExp: '',
                    desc: ''
                })

                const submitForm = () => {
                    console.log(typeof obj.age);
                    console.log(obj.username);
                    console.log(obj);
                }
                return {
                    ...toRefs(obj),
                    submitForm
                }
            }

        }).mount('#app')
    </script>
</body>

</html>